<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>22_v-for的基本使用</title>
  <!-- 
  在 Vue 中， `v-for`  指令用于在模板中渲染列表。它可以根据数组或对象的内容动态生成多个 DOM 元素。
  1. 基本语法
  `v-for`  的基本语法如下：
  <template>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </template>

  <script>
  export default {
    data() {
      return {
        items: [
          { id: 1, name: '苹果' },
          { id: 2, name: '香蕉' },
          { id: 3, name: '橙子' },
        ],
      };
    },
  };
  </script>
  在这个例子中， `v-for`  指令用于遍历  `items`  数组，并为每个元素生成一个  `<li>`  列表项。

  2. 语法结构
  `v-for`  的语法结构为：
  v-for="(item, index) in items"
  -  `item` ：当前遍历的元素。
  -  `index` （可选）：当前元素的索引。
  -  `items` ：要遍历的数组或对象。

  3. 使用对象

  `v-for`  也可以用于遍历对象的属性：
  <template>
    <ul>
      <li v-for="(value, key) in objectData" :key="key">{{ key }}: {{ value }}</li>
    </ul>
  </template>

  <script>
  export default {
    data() {
      return {
        objectData: {
          name: '张三',
          age: 25,
          city: '北京',
        },
      };
    },
  };
  </script>
  在这个例子中， `v-for`  用于遍历  `objectData`  对象的属性，并生成对应的列表项。

  4. 使用  `key`  属性
  在使用  `v-for`  时，建议为每个循环生成的元素提供一个唯一的  `key`  属性，以帮助 Vue 跟踪每个节点的身份，从而提高渲染性能和避免潜在的错误：
  <li v-for="item in items" :key="item.id">{{ item.name }}</li>

  5. 嵌套使用
  可以在  `v-for`  中嵌套使用多个循环：
  <template>
    <div>
      <div v-for="category in categories" :key="category.id">
        <h2>{{ category.name }}</h2>
        <ul>
          <li v-for="item in category.items" :key="item.id">{{ item.name }}</li>
        </ul>
      </div>
    </div>
  </template>
  在这个例子中，首先遍历  `categories`  数组，然后在每个类别下遍历其  `items` 。

  6. 注意事项
  - 性能：使用  `key`  属性可以提高性能，特别是在动态更新列表时。
  - 唯一性： `key`  属性的值应该是唯一的，通常使用数组中的唯一标识符（如 ID）。
  - 空值处理：如果数据为空， `v-for`  不会渲染任何内容。

  总结
  -  `v-for`  指令：用于在模板中渲染列表。
  - 遍历数组和对象：可以遍历数组的元素或对象的属性。
  - 使用  `key`  属性：为每个元素提供唯一的  `key`  属性以提高性能。
  - 支持嵌套：可以在  `v-for`  中嵌套使用多个循环。
  -->
</head>
<body>

  <div id="app">
    <h3>1.遍历数组</h3>
    <ul>
      <li v-for="item in movies" :key="item">{{ item }}</li>
    </ul>

    <h3>2.遍历对象</h3>
    <ul>
      <li v-for="(value, key, index) in objectData" :key="index">
        {{ index }} - {{ key }} - {{ value }}
      </li>
    </ul>

    <h3>3.遍历字符串(iterable)</h3>
    <ul>
      <li v-for="(item, index) in str" :key="index">{{ item }}</li>
    </ul>

    <h3>4.遍历数字</h3>
    <ul>
      <li v-for="n in 10" :key="n">{{ n }}</li>
    </ul>

    <h3>5.template遍历(如果div没有实际的意义, 那么可以使用template替换)</h3>
    <template v-for="(item, key) in objectData" :key="key">
      <div>{{ key }} - {{ item }}</div>
    </template>

  </div>

  <script src="../lib/vue.js"></script>
  <script>

    const { createApp, ref, reactive } = Vue
    createApp({
      setup() {
        const movies = ref(['星际穿越', '盗梦空间', '大话西游'])
        const str = ref('hello vue')
        const objectData = ref({
          name: '张三',
          age: 18,
          gender: '男'
        })

        return {
          str,
          movies,
          objectData
        }
      }
    }).mount('#app')


  </script>
  
</body>
</html>